const {resolve} = require('path');//node中内置的核心模块之一 path模块 用来处理路径
// 配置打包html资源
const HtmlWebpackPlugin = require('html-webpack-plugin');
// 清除上一次打包后的文件 即清除build文件下的文件
const {CleanWebpackPlugin} = require('clean-webpack-plugin');
const webpack = require('webpack');
module.exports = {
    // 入口
    entry:'./src/js/index.js',
    // 出口
    output:{
        filename:'./build.js',//输出的文件名字
        path:resolve(__dirname,'build/js')
    },
    mode:'development',//开发环境
    module:{
        rules: [
            /* 详细的loader配置，不同文件必须配置不同loader处理 */
            {
              // 匹配哪些loader进行处理
              test: /\.css$/, // 使用哪些loader进行处理,use中的loader执行顺序：从右到左，从上到下，依次执行
              use: [
                // 创建style标签，将js中的样式资源插入进行，添加到head中生效
                "style-loader", // 将css文件变成commonJs模块加载js中，里面内容是样式字符串
                "css-loader"
              ]
            },
            {
              test: /\.less$/,
              use: [
                "style-loader",
                "css-loader", // 将less文件编译成css文件 // 需要下载 less-loader和less
                "less-loader"
              ]
            },
            {
                // 问题：默认处理不了html中img图片
                // 处理图片资源
                test: /\.(jpg|png|gif)$/,
                    // 使用一个loader
                    // 下载 url-loader file-loader
                loader: 'url-loader',
                        options: {
                            // 图片大小小于8kb，就会被base64处理
                            // 优点: 减少请求数量（减轻服务器压力）
                            // 缺点：图片体积会更大（文件请求速度更慢）
                            limit: 8 * 1024,
                                // 问题：因为url-loader默认使用es6模块化解析，而html-loader引入图片是commonjs
                                // 解析时会出问题：[object Module]
                                // 解决：关闭url-loader的es6模块化，使用commonjs解析
                                esModule: false,
                                    // 给图片进行重命名
                                    // [hash:10]取图片的hash的前10位
                                    // [ext]取文件原来扩展名
                                    name: '[hash:10].[ext]'
                        }
            },
            {
                test: /\.html$/,
                    // 处理html文件的img图片（负责引入img，从而能被url-loader进行处理）
                    loader: 'html-loader'
            }
          ]
    },
    plugins:[
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({
            template:'index.html',
            filename:'index.html',
            minify:{//丑化代码
                removeComments:true,
                collapseWhitespace:true
            }
        }),
        new webpack.NamedModulesPlugin(),
        new webpack.HotModuleReplacementPlugin()
    ],
    devServer:{
        // 项目构建后的路径
        contentBase:resolve(__dirname,'build'),
        compress:true,
        // 端口号
        port:8081,
        // 自动打开浏览器
        open:true,
        hot:true
    }
}